<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html {
            height: 5000px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: grey;
            padding: 10px;
            margin: 50px;
            overflow-y: auto;
            /* display: none; */
        }

        .sub {
            width: 100px;
            height: 1000px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sub"></div>
    </div>
</body>
<script>
    // document.documentElement.clientWidth, document.documentElement.clientHeight 文档的可视宽高 
    // document.documentElement.scrollWidth, document.documentElement.clientHeight 文档的可视宽高
    // document.documentElement.scrollLeft, document.documentElement.scrollTop     页面中滚动条的位置

    // console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
    // console.log(document.documentElement.scrollWidth, document.documentElement.scrollHeight);

    // window.onscroll = function () {
    //     console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop);
    // }


    // Element.clientWidth / Element.clientHeight 元素的可视宽高 (content + padding)
    // Element.scrollWidth / Element.scrollHeight 元素的实际宽高 (content(包含超出的子内容) + padding)
    // Element.scrollLeft  / Element.scrollTop    元素中滚动条的位置


    // clientWidth / clientHeight  scrollWidth/scrollHeight 

    // 优点: 相较于传统的window.getComputedStyle() 可以快捷获取元素的宽度和高度

    // 缺点:
    // 1.  clientWidth / clientHeight 可视宽高(content + padding)
    //     scrollWidth / scrollHeight 元素的实际宽高 (content(包含超出的子内容) + padding)

    // 2. 只能取值 不能赋值, scrollLeft  / Element.scrollTop可以复制
    // 3. 对于隐藏的元素(display:none; hidden) , clientWidth / clientHeight  scrollWidth/scrollHeight 
    //    不生效 => 0


    var box = document.querySelector(".box");

    console.log(box.clientWidth, box.clientHeight);
    console.log(box.scrollWidth, box.scrollHeight);

    box.onscroll = function () {
        console.log(box.scrollLeft, box.scrollTop);
    }



</script>

</html>